<template>
    <el-container class="monitor-container">
      <el-main class="monitor-main">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="info-card">
              <div class="card-header">
                <span>监控端状态</span>
              </div>
              <div class="card-content">
                <el-tag :type="statusTagType">{{ monitorStatus }}</el-tag>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="info-card">
              <div class="card-header">
                <span>心跳时间</span>
              </div>
              <div class="card-content">{{ heartbeatTime  || "无"}}</div>
            </el-card>
          </el-col>
        </el-row>
  
        <el-row :gutter="20" class="row-spacing">
          <el-col :span="24">
            <el-card class="info-card">
              <div class="card-header">
                <span>通知地址</span>
              </div>
              <div class="card-content">{{host || "无"}}</div>
            </el-card>
          </el-col>
        </el-row>
  
        <el-row :gutter="20" class="row-spacing">
          <el-col :span="24">
            <el-card class="info-card">
              <div class="card-header">
                <span>通讯密钥</span>
           </div>
              <div class="card-content">{{ secretKey }}</div>
            </el-card>
          </el-col>
        </el-row>
  
        <el-row :gutter="20" class="row-spacing">
          <el-col :span="24">
            <el-card class="info-card">
              <div class="card-header">
                <span>配置二维码</span>
              </div>
              <div class="card-content">
                <img class="qr-code" :src="qrCode" alt="QR Code">
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import { index } from '/@/api/vpay/client';
// @ts-ignore
import QRCode from 'qrcode'

  export default {
    name: 'MonitorPage',
    setup() {
      // 监控端状态
      const monitorStatus = ref<'正常' | '异常'>('正常');
  
      // 根据状态设置 Tag 的类型
      const statusTagType = computed(() => {
        return monitorStatus.value === '正常' ? 'success' : 'danger';
      });
  
      // 心跳时间
      const heartbeatTime = ref<string>('');
      
      // 通讯密钥
      const secretKey = ref<string>('');

      // 通讯地址
      const host = ref<string>('');
      
      // 配置二维码
      const qrCode = ref<string>('');
      
      onMounted(() => {
        index().then(res => {
          if(res.data){
            heartbeatTime.value = res.data.heartbeat_time ? formatTime(res.data.heartbeat_time) : '',
            host.value = res.data.host,
            secretKey.value = res.data.secret_key
            if(res.data.is_valid){
              monitorStatus.value = '正常';
            }else{
              monitorStatus.value = '异常';
            }
            generateQrCode()
          }
        })
      })

      const formatTime = (time: number) => {
        time = time * 1000
        return new Date(time).toLocaleString()
      }



      const generateQrCode = () => {
        if (!host.value) return
        let data = JSON.stringify({
          host: host.value,
          key: secretKey.value
        })
        QRCode.toDataURL(data, (err, url) => {
          if (err) {
            console.error(err)
            return
          }
          qrCode.value = url
        })
      }
      
      
  
      return {
        monitorStatus,
        statusTagType,
        heartbeatTime,
        secretKey,
        host,
        qrCode
      };
    },
  };
  </script>
  
  <style scoped>
  .monitor-container {
    background-color: #f5f7fa;
    min-height: 100vh;
  }
  
  .monitor-header {
    background-color: #409EFF;
    color: white;
    font-size: 24px;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
  }
  
  .monitor-main {
    padding: 20px;
  }
  
  .info-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }
  
  .card-content {
    font-size: 16px;
    color: #606266;
    margin-top: 10px;
  }
  
  .generate-button {
    float: right;
  }
  
  .row-spacing {
    margin-top: 20px;
  }
  
  .qr-code {
    display: block;
    margin: 0 auto;
  }
  </style>